<template>
    <div class="selectPeople">
        <div class="header">
            <p class="remove" @click="goback()">取消</p>
            <p class="title">添加关注的人</p>
            <p class="suer" @click="confirmBtn()">确定</p>
        </div>
        <ul class="selectPeople_box">
            <li v-for="(item,index) in PeopleList" :key="index" @click="selectClick($event)">
                <div class="selectPeople_l">
                    <p class="selectPeople_l_img">
                        <img :src="item.headerImg" alt="">
                    </p>
                    <p class="selectPeople_l_name">{{item.peopleName}}</p>
                </div>
                <div class="selectPeople_r">
                    <input class="checkInput" type="checkbox" name="" :id="'checkInput'+index" ref="refInput" :value="item.peopleId">
                    <label class="checkLabel" :for="'checkInput'+index">
                        <i></i>
                    </label>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  name: "selectPeople",
  data() {
    return {
            token: localStorage.getItem("token")?localStorage.getItem("token"):'',
      tokenParams:{
          token:localStorage.getItem("token")?localStorage.getItem("token"):''
      },
      PeopleList: [] /*当前城市参与活动的人 */,
      checkedList: [] /*选择的人数存放数组 */,
      thisCity: this.$route.query.selectCity /*当前城市*/
    };
  },
  created() {
    this.initLikeList();
  },
  methods: {
    /*初始化关注列表 */
    initLikeList() {
        let voteListUrl='';
        if (this.$route.query.homeSpokesman) {/*代言人 */
            voteListUrl="user/voteList"
        }else{
            voteListUrl="user/voteList2"
        }
      let likeParams = {
        city: this.thisCity,
        token:this.token
      };
      this.axios
        .post(this.APIHOST + voteListUrl, likeParams)
        .then(r => {
          if (r.data && r.data.code == 0) {
            if (r.data.data.length > 0) {
              this.PeopleList = r.data.data.map(item => {
                return {
                  headerImg: item.userImage,
                  peopleName: item.userName,
                  peopleId: item.uid
                };
              });
            } else {
              this.PeopleList = [];
            }
          } else {
            this.$p_message(r.data.msg, "error");
          }
        });
    },
    goback() {
      if (this.$route.query.homeSpokesman) {
        this.$router.push({
          path: "/wx/personalDetails",
          query: {
            myPersonalId:this.$route.query.myPersonalId,
            selectCity: this.$route.query.selectCity,
            homeSpokesman: "homeSpokesman"
          }
        });
      } else {
        this.$router.push({
          path: "/wx/personalDetails",
          query: {
            myPersonalId: this.$route.query.myPersonalId,
            selectCity: this.$route.query.selectCity
          }
        });
      }
    },
    /*选择事件 */
    selectClick(event) {
      let _self = this;
      const srcEl = event.target || event.srcElement;
      if (srcEl.checked == false) {
        this.checkedList.splice(_self.checkedList.indexOf(srcEl.value), 1);
      } else if (srcEl.checked == true) {
        this.checkedList.push(srcEl.value);
      }
    },
    /*确定按钮 */
    async confirmBtn() {
       await  this.checkedList.forEach(item=>{
             this.postAdd(item)
         })
      this.goback();
    },
    /*添加请求 */
    postAdd(val){
        let postParams={
            user_id:val,
            token:this.token
        }
        this.axios.post(this.APIHOST+'user/followme',postParams).then(r=>{

        })
    }
  }
};
</script>
<style lang="less" scoped>
@import url(../assets/less/public.less);
.selectPeople {
  .header {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    @flex();
    @justify5();
    padding: 0 30px;
    height: 120px;
    line-height: 120px;
    background: @config-bg15;
    box-sizing: border-box;
    z-index: 9;
    p {
      @color1();
    }
    .title {
      @font16();
    }
  }
  .selectPeople_box {
    margin-top: 120px;
    li {
      border-bottom: 2px solid @config-bg3;
      height: 120px;
      @flex();
      @justify5();
      padding: 0 30px;
      .selectPeople_l {
        @flex();
        @justify1();
        .selectPeople_l_img {
          margin-right: 22px;
          width: 72px;
          height: 72px;
          border-radius: 72px;
          overflow: hidden;
          background: @config-bg3;
          img {
            width: 100%;
          }
        }
        .selectPeople_l_name {
          @color2();
        }
      }
      .selectPeople_r {
        position: relative;
        .checkInput {
          width: 48px;
          height: 48px;
          opacity: 0;
        }
        .checkLabel {
          width: 48px;
          height: 48px;
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          border-radius: 48px;
          border: 2px solid @config-bg3;
          box-sizing: border-box;
          background: @config-bg2;
        }
        .selectTrue {
          background: @config-bg13;
          border: 2px solid @config-bg13;
        }
        input:checked + label {
          background-color: @config-bg13;
          border: 0.02666667rem solid @config-bg13;
        }
        input:checked + label::after {
          position: absolute;
          top: 0.08rem;
          left: 0.16rem;
          content: "";
          width: 0.16rem;
          height: 0.32rem;
          border: 0.04rem solid #fff;
          border-top: none;
          border-left: none;
          transform: rotate(45deg);
        }
      }
    }
    li:last-child {
      border-bottom: none;
    }
  }
}
</style>


